Portfolio project #369
Portfolio project #369
Conversation
added url
There was a problem hiding this comment.
Congratulations on your portfolio🎉 Great job, Kathinka!
It has the look and feel of the Technigo design. My general comment here is, that you could make your code a bit dryer. It seems like you took a longer route to get to the same destination 🗺️
Try to think in the beginning what can you break down in smaller bites and pieces. But because you took the unconventional route, you found some really clever tricks, like button image 🤯
Also, I love to encourage people to write their README. Because I just like to read what people thought during their process.
With that said, I made you some comments below. Maybe you agree, or you can enlighten me with your way of thinking, because it's always interesting to see how other approach a task like this. If you have questions or if something is not clear, just slide into my DM 😉
| return ( | ||
| <picture className={style}> | ||
| <source srcSet={profileImage} | ||
| alt="Kathinka Sewell" type="image/webp" /> | ||
| <source srcSet={profileImageBackUp} | ||
| alt="Kathinka Sewell" type="image/png" /> | ||
| <img className="profile-image wide" | ||
| src={profileImageBackUp} | ||
| alt="Kathinka Sewell" | ||
| /> | ||
| </picture> |
There was a problem hiding this comment.
Since you want to have several images in this component, you could write it like that:
export const imageHeader = () => { return ( <img className={style} src={profileImage} alt="Kathinka Sewell" type="image/webp" /> ) } export const imageContact = () => { return ( <img className={style} src={profileImageBackUp} alt="Kathinka Sewell" type="image/png" /> ) }
maybe this is an approach you want to do.
EDIT: Formatting code is not really possible
There was a problem hiding this comment.
You could have broken down the Projects component into smaller pieces. Then you would have more little code snippet instead of one large code pile.
| } | ||
|
|
||
| button.github { | ||
| background-image: url(../assets/Buttons/View-Code-button.svg); |
There was a problem hiding this comment.
This is actually a clever solution without struggling with too much CSS. Amazing 🌟
There was a problem hiding this comment.
Hi! Please make sure you're following the design and that your project is responsive (have a look at 320px width). Here are some questions to start from:
- Are all font-sizes according to the design?
- Are all font-families according to the design?
- Are all sizes according to the design?
- Are all distances (margin, padding) according to the design? Are the sections aligned where they should be?
- Does it look good on all screen widths from 320px to 1600px?
- Are the line-heights according to the design?
- Are the texts center/left aligned according to the design?
…er image for websites without images
… image for websites without images
… image for websites without images
Netlify link
Collaborators
solo